<template>
  <el-container>
    <el-header>
      <!--导航-->
      <div style="float: left;">
        <!--写网站logo、标题等-->
        <h1>nf-press</h1>
      </div>
      <div style="float: right;min-width: 100px;height: 60px;padding-top: 13px;">
        <!--写网站logo、标题等-->
        <el-switch v-model="current.isView" v-bind="itemProps"></el-switch>
      </div>
      <div style="float: right;min-width: 600px;height: 60px;">
        <!--网站导航-->
        <doc-navi ></doc-navi>
      </div>
    </el-header>
    <el-container>
      <!--左侧边栏-->
      <el-aside width="330px">
        <!--菜单-->
        <doc-menu v-if="current.isView" />
        <doc-menu-edit v-else/>
      </el-aside>
      <el-main>
        <!--文档区域-->
        <component
          :is="docControl[current.isView]"
        />
        <!--讨论区域
        <iframe src="https://nfpress.gitee.io/nf-press-edit/vssue" style="width: 500px;height: 400px;"></iframe>
        -->
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
  import { defineAsyncComponent, reactive } from 'vue'
  import { ElContainer, ElHeader, ElAside, ElMain, ElSwitch } from 'element-plus'
  import { docMenu, docMenuEdit, docNavi } from '/nf-press-edit' // 菜单 导航 配置
  import docView from './views/doc.vue' // 显示文档
  // 访问状态
  import { store } from '@naturefw/nf-state'

  const { current } = store

  // 加载菜单子控件
  const docControl = {
    true: docView,
    false: defineAsyncComponent(() => import('./views/main.vue'))
  }

  const itemProps = {
    'inline-prompt': true,
    'active-text': '看',
    'inactive-text': '写',
    'active-color': '#378FEB',
    'inactive-color': '#EA9712'
  }


</script>

<style>
body {
  background-color:#ece5d9;
}
  .el-header {
    background-color: #ece5d9;
    color: var(--el-text-color-primary);
    text-align: left;
    height: 80px;
    line-height: 30px;
    border: 1px solid #ccc!important;padding:14px;border-radius: 16px!important;
  }

  .el-aside {
    background-color: #ece5d9;
    color: var(--el-text-color-primary);
    text-align: left;
    line-height: 30px;
    min-height: 500px;
    border:1px solid rgba(159, 196, 238, 0.315);
  }

  .el-main {
    background-color: #ece5d9;
    color: var(--el-text-color-primary);
    text-align: left;
    line-height: 18px;
  }

  body > .el-container {
    margin-bottom: 10px;
  }

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 5px;
}
</style>
